import 'package:flutter/material.dart';
import 'package:zenge_web_flutter/bean/appbar_widget_bean.dart';
import 'package:zenge_web_flutter/date_base/appbar_widget_date.dart';

// ignore: must_be_immutable
class AppBarWidget extends StatefulWidget {
  List<AppBarWidgetBean> productsList;
  bool isExpand = false;
  double x;
  double boxHeight;

  AppBarWidget({Key key, this.productsList, this.boxHeight = 900}) : super(key: key);

  @override
  _AppBarWidgetState createState() => _AppBarWidgetState();
}

class _AppBarWidgetState extends State<AppBarWidget> {
  @override
  Widget build(BuildContext context) {
    double screenWidth = 1920;
    return Column(
      children: [
        Container(
          height: 65,
          width: MediaQuery.of(context).size.width,
          color: Colors.black87,
          child: Stack(
            children: [
              Positioned(
                left: screenWidth / 20,
                child: Image.network(
                    'http://nwzimg.wezhan.hk/contents/sitefiles3604/18024687/images/3393527.png'),
              ),
              Positioned(
                left: 1920 / 3,
                child: ContainerTap(
                    text01: '首页',
                    url: 'page_my_home',
                    num: 0,
                    // isExpand: widget.isExpand,
                    mouseListener: (Coordinate cList) {
                      setState(() {
                        widget.isExpand = cList.isEnter;
                        widget.x = cList.x;

                      });
                      widget.productsList = [];
                    }),
              ),
              Positioned(
                left: 1920 / 3 + 200,
                child: ContainerTap(
                    text01: '云服务和产品',
                    url: 'page_product',
                    num: 1,
                    // isExpand: widget.isExpand,
                    mouseListener: (Coordinate cList) {
                      setState(() {
                        widget.isExpand = cList.isEnter;
                        widget.x = cList.x;
                      });
                      widget.productsList = productList;
                    }),
              ),
              Positioned(
                left: 1920 / 3 + 400,
                child: ContainerTap(
                    text01: '合作模式',
                    url: 'page_cooperation',
                    num: 2,
                    // isExpand: widget.isExpand,
                    mouseListener: (Coordinate cList) {
                      setState(() {
                        widget.isExpand = cList.isEnter;
                        widget.x = cList.x;
                      });
                      widget.productsList = cooperationList;
                    }),
              ),
              Positioned(
                left: 1920 / 3 + 600,
                child: ContainerTap(
                    text01: '征极生态',
                    url: 'page_ecology',
                    num: 3,
                    mouseListener: (Coordinate cList) {
                      setState(() {
                        widget.isExpand = cList.isEnter;
                        widget.x = cList.x;
                      });
                      widget.productsList = ecologyList;
                    }),
              ),
              Positioned(
                left: 1920 / 3 + 800,
                child: ContainerTap(
                    text01: '关于征极',
                    url: 'page_about',
                    num: 4,
                    // isExpand: widget.isExpand,
                    mouseListener: (Coordinate cList) {
                      setState(() {
                        widget.isExpand = cList.isEnter;
                        widget.x = cList.x;
                      });
                      widget.productsList = aboutList;
                    }),
              ),
              Positioned(
                left: 1650,
                top: 20,
                child: CircleAvatar(
                  //头像半径
                  radius: 15,
                  //头像图片 -> NetworkImage网络图片，AssetImage项目资源包图片, FileImage本地存储图片
                  backgroundImage: NetworkImage(
                    'https://img03.sogoucdn.com/app/a/100520093/abe1eea3ca79fc28-c577ebdcb0f3dbcc-b36c258c7abc398066c56f0d2ab5b4ca.jpg',
                  ),
                ),
              ),
              Positioned(
                left: 1690,
                top: 25,
                child: PositionText(text: '简体中文',)
              ),
              Positioned(
                left: 1770,
                top: 25,
                child: Container(
                    alignment: Alignment.center,
                    margin: EdgeInsets.only(right: 5),
                    child: Text(
                      '|',
                    )),
              ),
              Positioned(
                left:1790,
                top: 20,
                child: CircleAvatar(
                  radius: 15,
                  backgroundImage: NetworkImage(
                    'http://bpic.588ku.com/element_origin_min_pic/16/10/25/8995debf6c5bab60950662cfa59be58f.jpg!rw400',
                  ),
                ),
              ),
              Positioned(
                left: 1830,
                top: 27,
                child: PositionText(text: 'English',)
              ),
            ],
          ),
        ),
        Stack(
          children: [
            Container(
              height: widget.boxHeight,
            ),
            (widget.productsList == null || widget.productsList.isEmpty) ? SizedBox():
            Positioned(
              left: widget.x,
              child: Column(
                children: [
                  Container(
                    width: 200,
                    height: 0.1,color: Colors.black45,),
                  AnimatedContainer(
                    duration: Duration(milliseconds: 500),
                    width: 200,
                    height: widget.isExpand ? 360 : 0,
                    color: Color.fromRGBO(67, 67, 83, 1),
                    child: ListView.builder(
                      itemCount: widget.isExpand ? widget.productsList.length : 0,
                      itemBuilder: (BuildContext context, int index) {
                        return MouseRegion(
                          onEnter: (_) {
                            setState(() {
                              widget.isExpand = true;
                              widget.productsList[index].isSuspension = true;
                            });
                          },
                          onExit: (_) {
                            setState(() {
                              widget.isExpand = false;
                              widget.productsList[index].isSuspension = false;

                            });
                          },
                          child: GestureDetector(
                            onTap: () {
                              Navigator.pushNamed(
                                  context, widget.productsList[index].url);
                            },
                            child: Container(
                              height: 60,
                              alignment: Alignment.center,
                              child: Text(
                                widget.productsList[index].text,
                                style:
                                    TextStyle(fontSize: 18, color: widget.productsList[index].isSuspension?Colors.orange:Colors.white),
                              ),
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                ],
              ),
            )
          ],
        )
      ],
    );
  }
}

// ignore: must_be_immutable
class ContainerTap extends StatefulWidget {
  final String text01;
  final String url;
  final int num;

  // bool isExpand = false;
  final ValueChanged<Coordinate> mouseListener;

  ContainerTap({
    Key key,
    this.text01,
    this.url,
    this.mouseListener,
    this.num,
  }) : super(key: key);

  @override
  _ContainerTapState createState() => _ContainerTapState();
}

class _ContainerTapState extends State<ContainerTap> {
  bool isEnter = false;
  List<Coordinate> cList = coordinateList;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.pushNamed(context, widget.url);
      },
      child: MouseRegion(
        onEnter: (_) {
          if (!cList[widget.num].isEnter) {
            setState(() {
              cList[widget.num].isEnter = true;
            });
            widget.mouseListener(cList[widget.num]);
          }
        },
        onExit: (_) {
          if (cList[widget.num].isEnter) {
            setState(() {
              cList[widget.num].isEnter = false;
            });
            widget.mouseListener(cList[widget.num]);
          }
        },
        child: Stack(
          alignment: Alignment.center,
            children: [
          AnimatedContainer(
            height: 100,
            width: 200,
            duration: Duration(milliseconds: 200),
            color: cList[widget.num].isEnter ? Color.fromARGB(0xff, 67, 67, 83) : Colors.transparent,
          ),
          Positioned(
            top: 20,
            child: Container(
                width: 200,
                alignment: Alignment.center,
                child: Text(
                  widget.text01,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 18,
                    color: Colors.white,
                  ),
                )),
          ),
        ]),
      ),
    );
  }
}

// ignore: must_be_immutable
class PositionText extends StatefulWidget {
  final text;
  bool isChange;

   PositionText({Key key, this.text,this.isChange=false}) : super(key: key);
  @override
  _PositionTextState createState() => _PositionTextState();
}

class _PositionTextState extends State<PositionText> {
  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) {
        setState(() {
          widget.isChange = true;
        });
      },
      onExit: (_) {
        setState(() {
          widget.isChange = false;

        });
      },
      child: Container(
          margin: EdgeInsets.symmetric(horizontal: 5),
          alignment: Alignment.center,
          child: Text(
           widget.text,
            style: TextStyle(fontSize: 14, color:  widget.isChange?Colors.white:Colors.grey),
          )),
    );
  }
}

